$(".smbox").mouseenter(function () {
    $(this).children("div").css({
        "display": "block"
    })
    $(".bigbox").css({
        "display": "block"
    })
})
$(".smbox").mouseleave(function () {
    $(this).children("div").css({
        "display": "none"
    })
    $(".bigbox").css({
        "display": "none"
    })
})

$(".smbox").mousemove(function (e) {
    var maskX = e.pageX - $('.smbox').offset().left - $('.smbox_fdj').width() / 2;
    var maskY = e.pageY - $('.smbox').offset().top - $('.smbox_fdj').height() / 2;

    if (maskX >= $(".smbox").width() - $(".smbox_fdj").width()) {
        maskX = $(".smbox").width() - $(".smbox_fdj").width();
    } else if (maskX <= 0) {
        maskX = 0;
    }
    if (maskY >= $(".smbox").height() - $(".smbox_fdj").height()) {
        maskY = $(".smbox").height() - $(".smbox_fdj").height();
    } else if (maskY <= 0) {
        maskY = 0;
    }
    $('.smbox_fdj').css({
        top: maskY,
        left: maskX
    })
})

$(".smbox").mousemove(function (e) {
    var maskX = e.pageX - $('.smbox').offset().left - $('.smbox_fdj').width() / 2;
    var maskY = e.pageY - $('.smbox').offset().top - $('.smbox_fdj').height() / 2;

    var bigImgX = $('.bigbox').width() - $('.bigimg').width();
    var bigImgY = $('.bigbox').height() - $('.bigimg').height();

    var maxImgX = maskX * bigImgX / ($('.smbox').width() - $('.smbox_fdj').width());
    var maxImgY = maskY * bigImgY / ($('.smbox').height() - $('.smbox_fdj').height());


    var aa = $(".smbox").width() - $('.smbox_fdj').width()
    var bb = $(".smbox").height() - $('.smbox_fdj').height()


    if (maskX > aa) {
        $('.bigimg').css({
            left: `${$('.bigimg').width()-$(".bigbox").width()}`
        })
    } else if (maskX < 0) {
        $('.bigimg').css({
            left: 0
        })
    } else {
        $('.bigimg').css({
            left: maxImgX
        })
    }
    if (maskY > bb) {
        $('.bigimg').css({
            top: `${$('.bigimg').height()-$(".bigbox").height()}`
        })
    } else if (maskY < 0) {
        $('.bigimg').css({
            top: 0
        })
    } else {
        $('.bigimg').css({
            top: maxImgY
        })
    }

})









$(".center ul li").mouseover(function () {
    $(this).css({
        "border-color": "red"
    }).siblings().css({
        "border-color": "#fff"
    })
    var num = ($(this).children().attr('src'));
    ($(".smbox").children("img").prop("src", num));
    ($(".bigbox").children("img").prop("src", num));
})







$(".bottom div:nth-child(2)").mouseover(function(){
    $(this).children("em").css({
        "color":"red"
    })
})
$(".bottom div:nth-child(2)").mouseout(function(){
    $(this).children("em").css({
        "color":"#000"
    })
})
